<template>
  <div class="container" @click='handleSwiper'>
    <div class="wrapper">
      <swiper :options='swiperOptions' >
        <!-- slides -->
        <swiper-slide v-for='(item, index) of gallaryImgs' :key='index'>
          <img :src="item" alt />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            swiperOptions: {
                pagination: '.swiper-pagination',
                paginationType: 'progress'
            }
        }
    },
    props:{
      gallaryImgs: Array
    },
    methods:{
        handleSwiper(){
            this.$emit('close');
        }
    }
};
</script>
<style lang="stylus" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
    img{
      width:100%;
      height:100%;
    }
}
</style>

